1. 雙向綁定 v-model

小技巧：不會讓使用者點選到第一個option

2.渲染 v-for、v-if、v-else、v-show

3. 渲染 v-bind

4. 渲染 v-style 可用物件或陣列陳述

:class

5. 事件綁定 v-on

6. computed

只讀不寫 無法直接this.xxx = xxx
差異：computed function名稱無需使用 data
使用：內部的變數若變更，會直接觸發computed
變數通常為data並且綁v-model
ex: get set

* computed 可抓 computed 來使用 (@{}@!!)

    // 取得各狀態總筆數
    filteredPage() {
      if (this.visibility === "all") {
        console.log("this.toDos", this.toDos);
        return this.toDos;
      }
      if (this.visibility === "active") {
        let activeFilter = this.toDos.filter((item) => {
          return item.completed === false;
        });
        console.log("activeFilter", activeFilter);
        return activeFilter;
      }
      if (this.visibility === "completed") {
        let completedFilter = this.toDos.filter((item) => {
          return item.completed === true;
        });
        console.log("completedFilter", completedFilter);
        return completedFilter;
      }
      return "";
    },
    // 藉由總筆數取得分頁
    filterGetPage() {
      let filterPage = [];
      this.filteredPage.forEach((item, index) => {
        if (index % 5 === 0) {
          // 0/0 === 0 =_=
          filterPage.push([]);
        }
      });
      return filterPage;
    },

7.watch

差異：直接將v-model所綁的data 命名function
使用：監聽data資料，改變直接觸發
通常只能一次監聽一個變數
若要一次監聽多個需使用深度監聽 > deep+物件

watch 監聽陣列 或 物件中其一屬性

8.Vue 生命週期

ex:v-if
(1) DOM生成

(2) Updated + destroyed

(3) 保留資料 keep-alive

9.Vue Component

注意html標籤不能大寫、元件data記得return

根元件

子元件

全域註冊元件

10.Props (外傳內)

Props 注意事項

(1) 子元件 拿取 根元件 資料，改根元件資料時會跳錯

解決：另給子元件一個data裝下該值，就不會直接更改到跟元件資料

(2) ajax抓資料速度不同，使用v-if判斷有無抓到資料而後顯示該元素

(3) 維持狀態與生命週期

11. Emit 內傳外 or 觸發(傳遞)事件

12. slot 使用他人套件，欲套用自己的內容時

一次全換


抽換

13. is 動態切換元件

效果同下v-if

14. Vue Cli

(1) 安裝 node + Vue cli 並建立專案

vue create new-projext(專案名稱)

a. 上課教學

b. 打完指令後選最下面的，自訂安裝
prettier 不熟悉語法用

(2) 專案建立完成

npm run build
npm run serve

(3) 架構

15. Vue Router

(1) 虛擬路徑配置

(2) 虛新增路徑及連結

(3) 巢狀路由

(4) 動態路由 npm install axios

抓取網址列後段進行操作

(5) 同一個路徑載兩個元件

(6) router方法

15. VueX

1. 禁止於Vue各元件檔案直接抓底層資料 ( this.$store.state.XXX )
   解決：getter 先抓資料 ( 詳見(1) )

2. 同前 ( this.$store.commit ) 禁止
   解決：action 先抓資料給 mutation變更，action才可用commit ( 詳見(2) )

(1)傳值 state + getter + mapGetters

(2)改變值 state + mutation + action(commit) + mapActions